<template>
  <div class="print_preview">
    <div class="print_btn_wrapper">
      <el-button type="primary" @click="btnPrintBtn">打印</el-button>
    </div>
    <div id="print_content_wrapper">
      <h2 class="print_content_wrapper_top">
        <span>{{ title }}</span>
      </h2>
      <div class="print_header">
        <div v-for="(item,index) in masterDataTop" :key="index">
          <span>{{ item.title }} : {{ item.value }}</span>
        </div>
      </div>
      <div v-if="billCat !== 'assemble'">
        <PrintTable
          ref="PrintTable"
          class="print_table"
          :table-data="tableData"
          :columns-data="columnsData"
        />
      </div>
      <div v-if="billCat === 'assemble'" class="margin-t20">
        <div><b>原商品清单</b></div>
        <PrintTable
          ref="assembleout"
          class="print_table"
          :table-data="tableDataOut"
          :columns-data="columnsData"
        />
        <div class="margin-t20"><b>新商品清单</b></div>
        <PrintTable
          ref="assemblein"
          class="print_table"
          :table-data="tableDataIn"
          :columns-data="columnsData"
        />
      </div>
      <div class="print_footer">
        <div v-for="(item,index) in masterDataBottom" :key="index">
          <span>{{ item.title }} : {{ item.value }}</span>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import PrintTable from './print-table'
import { print as printPurchase } from '@/api/bill/bill-purchase.js'
import { print as printPurchaseReturn } from '@/api/bill/bill-purchase-return.js'
import { print as printSale } from '@/api/bill/bill-sale.js'
import { print as printSaleReturn } from '@/api/bill/bill-sale-return.js'
import { print as printInventory } from '@/api/bill/bill-inventory.js'
import { print as printStockIn } from '@/api/bill/bill-stock-in.js'
import { print as printStockOut } from '@/api/bill/bill-stock-out.js'
import { Print } from '@/utils/print'

export default {
  name: 'PrintPage',
  components: {
    PrintTable
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    billId: {
      type: String,
      default: null
    },
    billCat: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      masterData: [],
      columnsData: [],
      tableData: [],
      tableDataIn: [],
      tableDataOut: []
    }
  },
  computed: {
    masterDataTop: function() {
      const masterData = this.masterData
      return masterData.filter(item => { return item.pos === 'top' })
    },
    masterDataBottom: function() {
      const masterData = this.masterData
      return masterData.filter(item => { return item.pos === 'bottom' })
    }
  },
  created() {
    this.initData()
  },
  methods: {
    btnPrintBtn() {
      Print(document.getElementById('print_content_wrapper'))
    },
    initData() {
      const billId = this.billId
      const method = this.getPrintMethod(this.billCat)
      method(billId).then(res => {
        if (res.data.flag) {
          const data = res.data.data
          const { cols, details, masters } = data
          if (this.billCat !== 'assemble') {
            this.columnsData = cols
            this.tableData = details
            this.masterData = masters
          } else {
            const tableDataOut = details.filter(item => { return item.direction === '0' })
            const tableDataIn = details.filter(item => { return item.direction === '1' })
            this.columnsData = cols
            this.tableDataOut = tableDataOut
            this.tableDataIn = tableDataIn
            this.masterData = masters
          }
        }
      })
    },
    getPrintMethod(billCat) {
      const methodsMap = {
        'purchase': printPurchase,
        'purchaseReturn': printPurchaseReturn,
        'sale': printSale,
        'saleReturn': printSaleReturn,
        'inventory': printInventory,
        'stockin': printStockIn,
        'stockout': printStockOut
      }
      return methodsMap[billCat]
    }
  }
}
</script>

<style scoped>
  .print_preview{
    padding: 10px 0;
  }
  .print_btn_wrapper{
      width: 210mm;
      margin: 0 auto;
  }
  #print_content_wrapper {
      color: #000000;
      width: 210mm;
      margin: 0 auto;
  }
  .print_content_wrapper_top {
      text-align: center;
  }
  .print_table{
      margin: 5px 0;
  }
  .print_header {
      display: grid;
      grid-template-columns: repeat(3, 33.33%);
      grid-template-rows: repeat(1, 24px);
      line-height: 24px;
  }
  .print_footer{
      display: grid;
      grid-template-columns: repeat(2, 50%);
      grid-template-rows: repeat(1, 24px);
  }
</style>
